<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>Tree 树形控件</title>
</head>
<body>

	<div id="vm">
		<h3>基础用法</h3>
		<el-tree 
			ref="tree01"
			:data="nodes" :props="defaultProps" 
			@node-click="handleNodeClick" 
			show-checkbox check-strictly node-key="id" 
			:default-expanded-keys="[1,2]"
			:default-checked-keys="checkedKeys"
			@check-change="onCheckChange"></el-tree>
		<div>{{checkedKeys}}</div>

		<h3>自定义渲染</h3>
	 	<el-tree
			:data="nodes"
			show-checkbox
			node-key="id"
			default-expand-all
			:expand-on-click-node="false">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				 <span>{{ node.label }}</span>
				 <span>(Id: {{ node.id }} )</span>
			</span>
	    </el-tree>

	</div>

	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		var vm = new Vue({
			el : '#vm',
			data : function() {
				return {
					nodes : [ {
						id : 1,
						label : '一级 1',
						children : [ {
							id : 4,
							label : '二级 1-1',
							children : [ {
								id : 9,
								label : '三级 1-1-1'
							}, {
								id : 10,
								label : '三级 1-1-2'
							} ]
						} ]
					}, {
						id : 2,
						label : '一级 2',
						children : [ {
							id : 5,
							label : '二级 2-1'
						}, {
							id : 6,
							label : '二级 2-2'
						} ]
					}, {
						id : 3,
						label : '一级 3',
						children : [ {
							id : 7,
							label : '二级 3-1'
						}, {
							id : 8,
							label : '二级 3-2'
						} ]
					} ],
					defaultProps : {
						children : 'children',
						label : 'label'
					},
					checkedKeys : [ 5 ]
				};
			},
			methods : {
				handleNodeClick : function(data) {
					console.log(data);
				},
				onCheckChange : function(data) {
					console.log(data);
					this.checkedKeys = this.$refs.tree01.getCheckedKeys();
					//设置节点选中可以使用  setCheckedKeys([key])
				}
			}
		});
	</script>
</body>
</html>